<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>数据中间件系统</title>
    <script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="/js/json2.js"></script>
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <style type="text/css">
        /*css loadng特效*/
        .spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: auto;
            width: 50px;
            height: 60px;
            text-align: center;
            font-size: 10px;

        }

        .spinner > div {
            background-color: #1ab394;
            height: 100%;
            width: 6px;
            display: inline-block;

            -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
            animation: stretchdelay 1.2s infinite ease-in-out;
        }

        .spinner .rect2 {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }

        .spinner .rect3 {
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }

        .spinner .rect4 {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }

        .spinner .rect5 {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }

        @-webkit-keyframes stretchdelay {
            0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
            20% { -webkit-transform: scaleY(1.0) }
        }

        @keyframes stretchdelay {
            0%, 40%, 100% {
                transform: scaleY(0.4);
                -webkit-transform: scaleY(0.4);
            }  20% {
                   transform: scaleY(1.0);
                   -webkit-transform: scaleY(1.0);
               }
        }
        /*loading遮罩层*/
        #loading{
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 2040;
            top: 0;
            left: 0;
            background-color: #00000029;
            display: none;
        }
    </style>

    <script type="text/javascript">
        var pageNum = 1;
        var totalNum = 0;
        function frontPage(){
            if(pageNum > 1){
                pageNum&#45;&#45;;
                query(pageNum);
            }
            else{
                $('#myModal').modal({backdrop: 'static', keyboard: false}); //手动开启，点击空白不关闭
                $('#tips').text("已经是第一页");
                $('#modals').click(function () {
                    $('#myModal').modal('hide')
                });
            }
        }

        function nextPage(){
            if(pageNum < totalNum){
                pageNum++;
                query(pageNum);
            }
            else{
                $('#myModal').modal({backdrop: 'static', keyboard: false}); //手动开启，点击空白不关闭
                $('#tips').text("已经是最后一页");
                $('#modals').click(function () {
                    $('#myModal').modal('hide')
                });
            }
        }

        function query(index) {
            if(index==1){
                pageNum = 1;
            }
            var request = {
                sqlStr: $("#sqlstr").val(),
                pageIndex: index,
                pageSize: 5
            };
            $('#loading').show();
            document.documentElement.style.overflowY = 'hidden';
            // $('#load').text('正在查询请稍候...')
            var baseUrl = getBaseUrl();
            $.ajax({
                type: "POST",
                url: baseUrl + "/query",
                data: JSON.stringify(request),
                dataType: "json",
                contentType: "application/json",
                success: function (data) {
                    if (data.code == "failed") {
                        $('#loading').hide();
                        document.documentElement.style.overflowY = 'scroll';
                        $('#myModal').modal({backdrop: 'static', keyboard: false}); //手动开启，点击空白不关闭
                        $('#tips').text(data.msg);
                        $('#modals').click(function () {
                            $('#myModal').modal('hide')
                        });
                    }
                    else if (data.code == "success") {
                        if(data.dataList!=null){
                            $('#loading').hide();
                            document.documentElement.style.overflowY = 'scroll';
                            totalNum = data.totalPages;
                            drawTable(data);
                            $("#totalPages").text("共" + data.totalPages + "页")
                        }
                        else{
                            $('#loading').hide();
                            document.documentElement.style.overflowY = 'scroll';
                            $("#tableDiv").html("");
                            $("#pageBtns").hide();
                            $("#export").hide();
                            $('#myModal').modal({backdrop: 'static', keyboard: false}); //手动开启，点击空白不关闭
                            $('#tips').text("没有数据");
                            $('#modals').click(function () {
                                $('#myModal').modal('hide')
                            });
                        }
                    }
                    else {
                        $('#loading').hide();
                        document.documentElement.style.overflowY = 'scroll';
                        $('#myModal').modal({backdrop: 'static', keyboard: false}); //手动开启，点击空白不关闭
                        $('#tips').text("查询失败");
                        $('#modals').click(function () {
                            $('#myModal').modal('hide')
                        });
                    }
                },
                error: function (data) {

                    $('#loading').hide()
                }
            })
        }

        function drawTable(data) {
            rows = data.dataList.length;
            cols = data.columnNameList.length;
            tableDiv = document.getElementById('tableDiv');
            var ta = tableDiv.getElementsByTagName('table')[0];
            if (ta) {
                // ta.parentNode.removeChild(ta)
                $("#tableDiv").html("");
            }
            var tab = document.createElement("table");
            // tab.width = 500;
            // tab.border = 2;
            tab.className="table table-bordered";
            for (var i = 0; i < rows; i++) {
                tab.insertRow(i)
                for (var j = 0; j < cols; j++) {
                    tab.rows[i].insertCell(j).innerHTML = data.dataList[i][j];
                    tab.rows[i].cells[j].style.background = 'white'
                }
            }
            createTHead(tab, data.columnNameList);
            document.getElementById("tableDiv").appendChild(tab);
            $("#pageBtns").show();
            $("#export").show();
        }

        function createTHead(table, columnNameList) {
            if (!table.tHead) {
                var header = table.createTHead();
                var row = header.insertRow(0);
                for (var i = 0; i < columnNameList.length; i++) {
                    var cell = row.insertCell(i);
                    cell.innerHTML = columnNameList[i];
                }
            }
        }

        function exportData() {
            $('#loading').show();
            document.documentElement.style.overflowY = 'hidden';
                type: "POST",
                url: "/export/excel",
                data: $("#sqlstr").val(),
                dataType: "text",
                contentType: "application/json",
                success: function (data) {
                    if (data == "sql_is_not_correct") {
                        $('#loading').hide();
                        document.documentElement.style.overflowY = 'scroll';
                        $('#myModal').modal({backdrop: 'static', keyboard: false}) //手动开启，点击空白不关闭
                        $('#tips').text('SQL配置格式错误')
                        $('#modals').click(function () {
                            $('#myModal').modal('hide')
                        })
                    }
                    else if (data == "success") {
                        $('#loading').hide();
                        document.documentElement.style.overflowY = 'scroll';
                        $('#myModal').modal({backdrop: 'static', keyboard: false}) //手动开启，点击空白不关闭
                        $('#tips').text('导出成功')
                        $('#modals').click(function () {
                            window.location.href='/main'
                        })
                    }
                    else {
                        $('#loading').hide();
                        document.documentElement.style.overflowY = 'scroll';
                        $('#myModal').modal({backdrop: 'static', keyboard: false}) //手动开启，点击空白不关闭
                        $('#tips').text(data);
                        $('#modals').click(function () {
                            $('#myModal').modal('hide')
                        })
                    }
                },
                error: function (data) {
                    $('#loading').hide();
                    document.documentElement.style.overflowY = 'scroll';
                }
            });
        }
    </script>
</head>
<body class="top-navigation">
<div id="wrapper">
    <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom white-bg">
            <nav class="navbar navbar-expand-lg navbar-static-top" role="navigation">
                <div class="navbar-collapse collapse" id="navbar">
                    <ul class="nav navbar-nav mr-auto">
                        <li class="active">
                            <a aria-expanded="false" role="button" onclick="javascript:window.location.href='/main'"> 返回主页</a>
                        </li>
                    </ul>
                </div>
            </nav>

        </div>
        <div class="wrapper wrapper-content">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="ibox ">
                            <div class="ibox-title">
                                <h5>手动查询</h5>
                            </div>
                            <div class="ibox-content">
                                <div class="table-responsive">
                                    <textarea style="height:311px;width:60%; resize: none;" id="sqlstr" placeholder="请输入SQL查询语句"></textarea>
                                    <br>
                                    <input type="button" class="btn btn-primary" style="width: 10%;"  onclick="query(1)" value="立即查询">
                                    <div id="tableDiv" class="table-responsive" style="margin-top: 2%"></div>
                                    <div id="pageBtns" class="page" style="display: none; margin-top: 2%" >
                                        <span id="totalPages" style="margin-right: 15px;"></span>
                                        <input type="button" class="btn btn-outline btn-link" onclick="frontPage()" value="上一页">
                                        <input type="button" class="btn btn-outline btn-link" onclick="nextPage()" value="下一页">
                                    </div>
                                    <div id="export" class="btnevent" style="display: none;margin-top: 2%">

                                        <input type="button" class="btn btn-primary "  width="10%" onclick="exportData()" value="导出">
                                    </div>
                                </div>
                                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-body" id="tips">配置成功</div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-primary" id="modals" data-dismiss="modal" >确定</button>
                                            </div>
                                        </div><!-- /.modal-content -->
                                    </div><!-- /.modal -->
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
                <div id="loading">
                    <div class="spinner">
                        <div class="rect1"></div>
                        <div class="rect2"></div>
                        <div class="rect3"></div>
                        <div class="rect4"></div>
                        <div class="rect5"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<!-- Custom and plugin javascript -->
<script src="/js/inspinia.js"></script>
<script src="/js/plugins/pace/pace.min.js"></script>

<!-- Peity -->
<script src="/js/plugins/peity/jquery.peity.min.js"></script>

<!-- iCheck -->
<script src="/js/plugins/iCheck/icheck.min.js"></script>

<!-- Peity -->
<script src="/js/demo/peity-demo.js"></script>


</body>

</html>